<template>
  <div>
    <div class="box1">
        <form action="#" method="get">
            邮箱:<input type="email" v-model="email"><br>
            姓名:<input type="text" v-model="name"><br>
            <input type="button" value="修改输入框中的数据" @click="change">
            <input type="button" value="获取输入框中的数据" @click="show">
        </form>
    </div>
    <br>
    <br>
    <div class="box2">
        <input type="text" v-model="num1">
        <select v-model="operation">
            <!--| 部分        | 作用            |
                | ----------- | -------------- |
                | `value="+"` | 选中的数据值，提交/绑定时用 |
                | `>+<`（文本）| 下拉菜单里显示给用户看的内容 |
 -->
            <option value="+">+</option>
            <option value="+">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select >
        <input type="text" v-model="num2">
        <input type="button" value="=" @click="calc">
        <input type="text" v-model="result">
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            email:'',
            name:'',
            num1:'',
            num2:'',
            result:'0',
            operation:"+"
        }
    },

//传统写法
// methods: {
//   change() {
//     document.getElementById('email').value = '22222@qq.com'
//     document.getElementById('name').value = '李白'
//   },
//   show() {
//     const e = document.getElementById('email').value
//     const n = document.getElementById('name').value
//     console.log(`${e}:${n}`)
//   }
// } 

   

    methods:{
        change(){
            this.email="22222@qq.com"
            this.name="李白"
        },
        show(){
            console.log(`${this.email}:${this.name}`)
        },
        calc(){
            switch(this.operation){
                case "+":
                    this.result=parseInt(this.num1)+parseInt(this.num2)
                    break;
                    case "-":
                    this.result=parseInt(this.num1)-parseInt(this.num2)
                    break;
                    case "*":
                    this.result=parseInt(this.num1)*parseInt(this.num2)
                    break;
                    case "/":
                    this.result=parseInt(this.num1)/parseInt(this.num2)
                    break;
            }
        }

    }

}
</script>

<style>

</style>